<template>
<div>
  <el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="7">
        <span>选择商户</span>
        <el-select
          v-model="merchantName"
          filterable
          clearable
          @clear="clearMerchant"
          @change="selectMerchant"
          placeholder="请选择"
        >
          <el-option
            v-for="item in merchants"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >

          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="addCoupon" >
          新增礼包
        </el-button>
      </el-col>
    </el-row>
  </el-row>
  <br>
  <el-row>
    <el-col
      :span="5"
      v-for="detail in coupons"
      :key="detail.id"
      :offset="1"
      style="margin-left: 5px"
    >
      <el-card :body-style="{ padding: '10px', height:'220px'}" shadow="hover" style="height: 200px; margin-bottom: 15px">
        <div style="padding: 6px;height: 120px">
          <p class="title">{{detail.name}}</p>
          <img :src="detail.logo" class="image">

        </div>
        <div style="height: 40px; float: bottom">
          <el-button type="text" @click="del(detail)" class="button">删除</el-button>
          <el-button type="text" @click="edit(detail)" class="button">编辑</el-button>
        </div>
      </el-card>
    </el-col>


  </el-row>

</div>
</template>

<script>
  export default {
    name: 'CouponHome',
    data(){
      return{
        merchants:[{
          name:'全部'
        }],
        merchantName:'全部',
        merchantId:0,
        coupons:[]
      }
    },
    mounted () {
      this.loadMerchant()
    },
    methods:{
      edit(coupon){
        this.$router.push({
          name:'addCoupon',
          query:{
            merchantId:this.merchantId,
            couponId:coupon.id
          }
        })
      },
      del(coupon){
        return this.$confirm("是否确定删除此礼包").then(() => {

          this.getAxios('giftCoupon/delete',{
            id:coupon.id
          }).then(() => {
            this.$message({
              type:'success',
              message:'删除成功'
            });
            this.coupons.rmove(coupon)
          }).catch(error => {
            this.$message({
              type:'info',
              message:error.msg
            });
          })
        }).catch(() =>{

        })
      },
      addCoupon(){
        if (this.merchantId < 1){
          this.$message({
            type:'info',
            message:'请选择商户'
          })
          return
        }
        this.$router.push({
          name:'addCoupon',
          query:{
            merchantId:this.merchantId
          }
        })
      },
      clearMerchant(){
        this.merchantName = ''
        this.merchantId = 0
        this.coupons.removeAll()
      },
      selectMerchant(val){
        this.merchantId = val
        this.loadCoupons()
      },
      // 接口请求
      loadMerchant(){
        this.getAxios('merchant/pageList').then(res => {
          this.merchants = this.merchants.concat(res.data)
          let merchant = this.merchants[0]
          this.merchantId = merchant.id
          this.loadCoupons()
        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      },
      loadCoupons(){
        this.getAxios('giftCoupon/pageList',{
          merchantId:this.merchantId
        }).then(res => {
          let data = res.data
          this.coupons = data
          // alert(data.length)
        }).catch(error =>{
          this.$message({
            type:'info',
            message:error.msg
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
